<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>	
<!--添加需要搜索的工具  -->
	<div id="tb2" style="padding:5px;height:auto">
		<div>
				<a href="#" class="easyui-linkbutton" iconCls="icon-add">新增</a>
		部门：<select class="easyui-combobox" panelHeight="auto" style="width:10%">
				<option value="java">Java</option>
				<option value="c">C</option>
				<option value="basic">Basic</option>
				<option value="perl">Perl</option>
				<option value="python">Python</option>
			</select>
		班组：<select class="easyui-combobox" panelHeight="auto" style="width:10%">
				<option value="java">Java</option>
				<option value="c">C</option>
				<option value="basic">Basic</option>
				<option value="perl">Perl</option>
				<option value="python">Python</option>
			</select>
		刷卡日期从: <input class="easyui-datebox" style="width:10%">
			到: <input class="easyui-datebox" style="width:10%">
		搜索文本：<input style="width:15%;height:28px;border-radius:5px;"/>
			<a href="#" class="easyui-linkbutton" iconCls="icon-search">Search</a>
		</div>
	</div>
	<table id="dg2"  data-options="
				rownumbers:true,
				singleSelect:true,
				autoRowHeight:false,
				pagination:true,
				pageSize:10,
				toolbar:'#tb',
				height:'86.2%',
				width:'100%',
				tools:'#tb2'
				">
		<thead>
			<tr>
				<th field="date" width="15%" data-options="sortable:true">员工编号</th>
				<th field="name" width="15%">员工名称</th>
				<th field="amount" width="10%">部门</th>
				<th field="price" width="25%" >考勤异常原因</th>
				<th field="cost" width="17%" data-options="sortable:true">时间</th>
				<th field="cost" width="15%" >处理状态</th>
				<th field="amount" width="15%" >状态</th>
			</tr>
		</thead>
	</table>
	
	<script>
		function getData(){
			var rows = [];
			for(var i=1; i<=800; i++){
				var amount = Math.floor(Math.random()*1000);
				var price = Math.floor(Math.random()*1000);
				rows.push({
					inv: 'Inv No '+i,
					date: $.fn.datebox.defaults.formatter(new Date()),
					name: 'Name '+i,
					amount: amount,
					price: price,
					cost: amount*price,
					note: 'Note '+i
				});
			}
			return rows;
		}
		
		function pagerFilter(data){
			if (typeof data.length == 'number' && typeof data.splice == 'function'){	// is array
				data = {
					total: data.length,
					rows: data
				}
			}
			var dg = $(this);
			var opts = dg.datagrid('options');
			var pager = dg.datagrid('getPager');
			pager.pagination({
				onSelectPage:function(pageNum, pageSize){
					opts.pageNumber = pageNum;
					opts.pageSize = pageSize;
					pager.pagination('refresh',{
						pageNumber:pageNum,
						pageSize:pageSize
					});
					dg.datagrid('loadData',data);
				}
			});
			if (!data.originalRows){
				data.originalRows = (data.rows);
			}
			var start = (opts.pageNumber-1)*parseInt(opts.pageSize);
			var end = start + parseInt(opts.pageSize);
			data.rows = (data.originalRows.slice(start, end));
			return data;
		}
		
		$(function(){
			$('#dg2').datagrid({loadFilter:pagerFilter}).datagrid('loadData', getData());
		});
	</script>
</body>
</html>